<template>
    <div>
        <div class="avue-echart-flop__item avue-echart-flop__item--img num-item"
             v-for="item in showArr(dynamicData.num)">
            <span>{{item}}</span>
        </div>
    </div>
</template>

<script>
    import mixin from './mixin'
    export default {
        mixins:[new mixin()],
        name: "digitalFlop",
        data(){
            return {
                // 暴露在外的表单属性
                interfaceAttrs: {
                    num: {
                        type: 'String',
                        name: '值',
                        default:34567,
                    }
                },
            }
        },
        computed:{
            showArr(){
               return function (val) {
                   let str =val.toString();
                   return str.split('')
               }
            }
        }
    }
</script>

<style scoped lang="stylus">
    .avue-echart-flop__item--img {
        padding: 0 5px;
        border-image-slice: 10 16 15 10 fill;
        border-width: 10px 16px 15px 10px;
        border-style: solid;
    }
    .avue-echart-flop__item {
        font-family: "Microsoft Yahei";
        font-size: 28px;
        font-weight: 400;
        color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
    }
    .num-item{
        color: rgb(234, 201, 16);
        font-size: 32px;
        font-weight: normal;
        align-items: center;
        border-image-source: url('../../../../images/border1.png');
    }
</style>
